<template>
	<view style="padding: 0 30rpx;">
		<!-- 绑定邮箱 -->
		<view class="email">
			邮箱：{{email ? email : '你不绑邮箱，我发去哪里？'}}
		</view>
		<!-- 更换邮箱，发送报告 -->
		<view class="btnBox">
			<u-button class="btn" ripple plain size="mini" type="warning" @click="showModel = true">{{email ? '更换' : '绑定'}}邮箱</u-button>
			<u-button class="btn" ripple plain size="mini" type="primary" @click="showYear = true">按年导出</u-button>
			<u-button class="btn" ripple plain size="mini" type="primary" @click="showMonth = true">按月导出</u-button>
			<u-button class="btn" ripple plain size="mini" type="primary" @click="showCalendar = true">选定日期</u-button>
		</view>
		
		
		<!-- 绑定邮箱的模态框 -->
		<u-mask :show="showModel" @click="showModel = false">
			<view class="modelBox" @click.stop="stop">
				<view class="line">
					<view class="title">输入邮箱：</view>
					<input type="text" value="" />
					<u-button class="btn" size="mini" type="primary" @click="null">发送</u-button>
				</view>
				<view class="line">
					<view class="title">验证码：</view><input type="text" value="" />
					<u-button class="btn" size="mini" type="primary" @click="null">验证</u-button>
				</view>
				<u-button style="margin-top: 30rpx;" size="mini" type="info" @click="showModel = false">关闭</u-button>
			</view>
		</u-mask>
		<!-- 按年导出选择器 -->
		<u-picker mode="time" v-model="showYear" :params="yearParams" @confirm="yearHandle"></u-picker>
		<!-- 按月导出选择器 -->
		<u-picker mode="time" v-model="showMonth" :params="monthParams" @confirm="monthHandle"></u-picker>
		<!-- 选定日期选择器 -->
		<u-calendar v-model="showCalendar" mode="range" @change="handleCalendar"></u-calendar>
		<!-- 导出确认 -->
		<u-modal v-model="showDelModel" :show-cancel-button="true" @confirm="sureToDo">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 确认导出的model框
				showDelModel: false,
				// 绑定邮箱的模态框是否展示
				showModel: false,
				// 按年导出选择器是否展示
				showYear: false,
				// 按月导出选择器是否展示
				showMonth: false,
				// 选定日期选择器是否展示
				showCalendar: false,
				// 导出确认框的内容
				content: '',
				// 已绑定的邮箱
				email: '',
				yearParams: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				monthParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		methods: {
			// 导出记录
			sureToDo: function() {
				// todo: 发起请求，而后提示请求成功或失败，并告诉他们等邮件就完事了
			},
			// 选定了哪一年
			yearHandle: function(e) {
				const { year } = e
				this.content = `确认导出${year}年的数据吗？`
				this.showDelModel = true
			},
			// 选定了哪一月
			monthHandle: function(e) {
				const { year, month } = e
				this.content = `确认导出${year}年${month}月的数据吗？`
				this.showDelModel = true
			},
			// 选定了哪一段时间
			handleCalendar: function(e) {
				console.log(e);
				const { startDate, endDate, startYear, startMonth, startDay, endYear, endMonth, endDay } = e
				this.content = `确认导出<br>
				${startYear}年${startMonth}月${startDay}日-${endYear}年${endMonth}月${endDay}日<br>
				的数据吗`
				this.showDelModel = true
			},
			// 空事件，阻止冒泡用
			stop: function() {}
		}
	}
</script>

<style scoped>
	.email{
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx 0;
		color: #fff;
	}
	.btnBox{
		display: flex;
		justify-content: space-between;
	}
	.modelBox{
		width: 690rpx;
		height: 400rpx;
		border-radius: 5px;
		background-color: rgba(255,255,255, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #333!important;
	}
	.title{
		width: 160rpx;
		text-align-last: justify;
	}
	.modelBox .line{
		width: 600rpx;
		display: flex;
	}
	.modelBox .line input{
		width: 350rpx;
		border-bottom: 1px solid #ccc;
		margin-right: 20rpx;
	}
	.slot-content{
		font-size: 26rpx;
		color: #333;
		text-align: center;
		line-height: 44rpx;
		margin: 30rpx 0;
	}
</style>
